<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #f00;
            position: absolute;
            left: 1100px;
        }
    </style>
</head>

<body>

    <div id="a"></div>

    <script>

        let oDiv = document.querySelector('div');
        move(oDiv, 'left', 0)


        // 缓冲运动  --- 减速运动的一种
        //    把剩下的路程等分n份   每次跑1/n    剩下的路程会越来越短   速度也会越来越慢    --- 减速运动
        //       n缓冲因子


        function move(ele, prop, end, cb) {
            let t = setInterval(function () {
                let cur = parseInt(getComputedStyle(ele)[prop]);  // 1100
                // 把剩下的路程等分10份   10是可以改变
                let speed = (end - cur) / 10;     // -11
                // 正向运动的时候向上取整  --- 保证了最小值是1
                // 反向运动的时候向下取整  --- 保证了最小值是-1    -0.5    -1   向下取整
                // speed = Math.ceil(speed); 
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                cur += speed;
                ele.style[prop] = cur + 'px';
                if (cur === end) {
                    clearInterval(t);
                    cb && cb();
                }
            }, 20)
        }





    </script>

</body>

</html>